<template>
  <div class="main">
    <div class="loading"></div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance()
const state: any = reactive({})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #001d30;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: changeBg 5s infinite linear;
  @keyframes changeBg {
    to {
      filter: hue-rotate(360deg);
    }
  }
  .loading {
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(to top, #001d30 40%, #51eeee);
    border-radius: 50%;
    animation: rotate 1.5s linear infinite;
    &:before {
      content: '';
      position: absolute;
      background-color: #001d30;
      inset: 20px 20px 0 0;
      border-radius: 50%;
    }
    &:after {
      content: '';
      position: absolute;
      border-radius: 50%;
      top: 50px;
      right: -8px;
      width: 40px;
      height: 40px;
      background-color: #51eeee;
      box-shadow:
        0 0 5px #51eeee,
        0 0 25px #51eeee,
        0 0 50px #51eeee,
        0 0 75px #51eeee,
        0 0 100px #51eeee;
    }
  }
}
</style>
